<template>

    <el-menu class="el-menu-vertical-demo" background-color="#304156" :collapse="isCollapse"
        :collapse-transition="false" text-color="white" 
        :unique-opened="true" :router="true"
        default-active="$router.fullPath">

        <el-menu-item class="bg-[#222e3d] font-bold">
            <el-icon size="28px" class="is-loading">
                <Loading />
            </el-icon>
            <span class="ml-[5px] italic" v-show="!isCollapse">点餐系统·后台</span>
        </el-menu-item>

        <el-sub-menu index="a">
            <template #title>
                <el-icon>
                    <CirclePlus />
                </el-icon>
                <span>菜品分类</span>
            </template>

            <el-menu-item index="/Manager/AddCategoryInfo">
                <el-icon>
                    <CirclePlus />
                </el-icon>
                <template #title>新增分类</template>
            </el-menu-item>


            <el-menu-item index="/Manager/CategoryInfoList">
                <el-icon>
                    <ShoppingBag />
                </el-icon>
                <template #title>分类列表</template>
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="c">
            <template #title>
                <el-icon>
                    <Burger />
                </el-icon>
                <span>菜品名称</span>
            </template>

            <el-menu-item index="/Manager/AddFoodInfo">
                <el-icon>
                    <CirclePlus />
                </el-icon>
                <template #title>新增菜品</template>
            </el-menu-item>


            <el-menu-item index="/Manager/FoodInfoList">
                <el-icon>
                    <ShoppingBag />
                </el-icon>
                <template #title>菜品列表</template>
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
            <template #title>
                <el-icon>
                    <Avatar />
                </el-icon>
                <span>用户信息</span>
            </template>

            <el-menu-item index="/Manager/UserInfoList">
                <el-icon>
                    <Document />
                </el-icon>
                <template #title>用户信息列表</template>
            </el-menu-item>



        </el-sub-menu>

        <el-sub-menu index="4">
            <template #title>
                <el-icon>
                    <LocationInformation />
                </el-icon>
                <span>收货地址信息</span>
            </template>

            <el-menu-item index="/Manager/AddressInfoList">
                <el-icon>
                    <OfficeBuilding />
                </el-icon>
                <template #title>收获地址列表</template>
            </el-menu-item>



        </el-sub-menu>

        <el-sub-menu index="5">
            <template #title>
                <el-icon>
                    <List />
                </el-icon>
                <span>订单管理</span>
            </template>

            <el-menu-item index="/manager/OrderInfoList">
                <el-icon>
                    <ShoppingBag />
                </el-icon>
                <template #title>订单列表</template>
            </el-menu-item>


        </el-sub-menu>

        <el-sub-menu index="6">
            <template #title>
                <el-icon>
                    <ChatDotSquare />
                </el-icon>
                <span>评论管理</span>
            </template>

            <el-menu-item index="/Manager/CommtInfoList">
                <el-icon>
                    <ChatLineSquare />
                </el-icon>
                <template #title>评论列表</template>
            </el-menu-item>


        </el-sub-menu>

        <el-sub-menu index="7">
            <template #title>
                <el-icon>
                    <Tools />
                </el-icon>
                <span>管理员信息</span>
            </template>

            <el-menu-item index="/Manager/AddAdminInfo">
                <el-icon>
                    <CirclePlus />
                </el-icon>
                <template #title>新增管理员</template>
            </el-menu-item>


            <el-menu-item index="72">
                <el-icon>
                    <Edit />
                </el-icon>
                <template #title>修改密码</template>
            </el-menu-item>
            <el-menu-item index="/Manager/AdminInfoList">
                <el-icon>
                    <ShoppingBag />
                </el-icon>
                <template #title>管理员列表</template>
            </el-menu-item>

        </el-sub-menu>
    </el-menu>
</template>


<script setup>
import { ref, computed } from "vue";
import { mainStore } from "../store";
import { storeToRefs } from "pinia";
import {useRouter} from "vue-router";


import {
    Menu as IconMenu,
    Location,
    ChatDotSquare,
    LocationInformation,
    Avatar,
    List,
    Tools,
    Burger,
    Loading,
    CirclePlus,
    ChatLineSquare,
    ShoppingBag,
    OfficeBuilding,
    Document,
    Edit

} from '@element-plus/icons-vue'
const store = mainStore();
const router=useRouter();
//计算属性获取这个值
// const isCollapse = computed(() => store.isCollapse);

const { isCollapse } = storeToRefs(store);
//
</script>


<style scoped>
:deep(el-menu-vertical-demo:not(.el-menu--collapse)) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    border-right: none !important;
}
</style>